<template>
  <view>
    <map
      id="test_map"
      ref="map1"
      style="width: 100%; height: 600px"
      :show-location="true"
      :longitude="map.longitude"
      :latitude="map.latitude"
      :markers="markers"
      :polyline="polyline"
      show-compass="true"
      :polygons="polygons"
      :controls="controls"
      @tap="tapMap"
    >
    </map>
    <!-- '	<button @click="position(39.894589, 116.32125)">定位</button>' -->

    <button @click="chooseLocation">定位</button>
    <button @click="point">撒点</button>
    <button @click="line">划线</button>
    <button @click="area">绘制区域</button>
    <button @click="doDelete">清空</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      //绘制区域
      polygons: [],
      //区域点lsit
      option: [
        {
          longitude: 115.52125,
          latitude: 39.794587,
        },
        {
          longitude: 114.02125,
          latitude: 39.594581,
        },
        {
          longitude: 116.72125,
          latitude: 39.294585,
        },
      ],
      mapContext: {},
      map: {
        longitude: "", //经度
        latitude: "", //纬度
      },
      //线数据
      polyline: [],
      //点数据list
      pointList: [
        {
          longitude: 115.52125,
          latitude: 39.794587,
        },
        {
          longitude: 114.02125,
          latitude: 39.594581,
        },
        {
          longitude: 119.72125,
          latitude: 39.294585,
        },
      ],
      controls: [],
      //撒点list
      markers: [],
    };
  },
  created() {
    let _this = this;
    // if (this.getLocation != null) {
    // 	_this.map.longitude = this.getLocation.longitude;
    // 	_this.map.latitude = this.getLocation.latitude;

    // 	return;
    // }
  },
  mounted() {
    this.mapContext = uni.createMapContext("test_map", this);
  },
  methods: {
    //撒点
    point() {
      // 遍历 polyline 中的每个点，并添加到地图上
      this.pointList.forEach((point) => {
        this.addPoint(point.latitude, point.longitude);
      });
    },
    //描点
    addPoint(latitude, longitude) {
      let point = {
        id: this.markers.length + 1, // 自动增加 id
        width: 40, //宽
        height: 40, //长
        latitude: latitude,
        longitude: longitude,
        iconPath: "/static/default.png", // 使用默认定位图标
        anchor: {
          x: 0.5,
          y: 1,
        },
      };
      this.markers.push(point);
    },
    //划线
    line() {
      // 更新 polyline 数组
      this.polyline = [
        {
          points: [
            {
              longitude: 116.52125,
              latitude: 39.794587,
            },
            {
              longitude: 116.02125,
              latitude: 39.594581,
            },
            {
              longitude: 116.72125,
              latitude: 39.294585,
            },
          ],
          color: "#ff0f0f",
          width: 10,
          dottedLine: true,
          arrowLine: true,
          colorList: true,
        },
      ];
    },
    //绘制区域
    area() {
      // 点线面，如果不是面就不让他生成
      if (this.option.length > 2) {
        this.polygons = [
          {
            strokeWidth: 1,
            strokeColor: "#67c23a",
            fillColor: "#1791fc66",
            dottedLine: false,
            arrowLine: false,
            level: "abovelabels",
            points: this.option,
          },
        ];
        this.polygons[0].points = [];
        this.polygons[0].points.push(...this.option);
      } else {
        uni.showToast({
          title: "起码选择三个点",
          duration: 2000,

          icon: "error",
        });
      }
    },
    tapMap(e) {
      var that = this;
      var id = e.currentTarget.id;
      var maps = uni.createMapContext("test_map", this).$getAppMap();

      maps.onclick = function (point) {
        console.log(point);

        point.iconPath = "/static/default.png";
        that.markers = that.markers.concat(point);

        uni.showToast({
          title: "添加成功",
          icon: "none",
        });
      };
    },
    //定位
    position(latitude, longitude) {
      this.mapContext.moveToLocation({
        latitude: latitude,
        longitude: longitude,
        success: (res) => {
          console.log("撒点");

          this.addPoint(latitude, longitude);
        },
      });
      // ref定位
      // this.$refs.map1.moveToLocation({
      // 		latitude: 39.894589,
      // 		longitude: 116.32125,
      // 	},
      // 	function(res) {
      // 		console.log("此处无回调!!!本条信息未在控制台打印");
      // 		console.log(res);
      // 	}
      // );
    },
    doDelete() {
      //清空区域
      (this.polygons = []),
        // 清空点
        (this.markers = []),
        // 清空线
        (this.polyline = []);
    },
    // 选择位置
    chooseLocation() {
      uni.showLoading({
        title: "获取信息中",
      });
      uni.getLocation({
        type: "gcj02",
        success: (res) => {
          this.setMap(res);
          uni.hideLoading(); // 获取位置信息成功后隐藏加载指示器
        },
        fail: (error) => {
          console.error("获取位置信息失败", error);
          uni.showToast({
            title: "获取位置信息失败",
            icon: "none",
          });
          uni.hideLoading(); // 获取位置信息失败后隐藏加载指示器
        },
      });
    },
    // 设置地图
    setMap(item) {
      this.markers = [
        {
          latitude: item.latitude,
          longitude: item.longitude,
        },
      ];
      this.mapContext.moveToLocation({
        latitude: item.latitude,
        longitude: item.longitude,
        success: () => {
          this.addPoint(item.latitude, item.longitude);
        },
      });
    },
  },
};
</script>
<style></style>
